<template>
  <page class="app-container">
    <!-- 过滤条件 begin-->
    <el-form :inline="true" class="filter-container">
      <el-form-item label="当前门店" prop="oilCode">
        <shop-select v-model="searchForm.shopId" :all="true"></shop-select>
      </el-form-item>
      <el-form-item prop="state" label="兑换状态">
        <el-select v-model="searchForm.state" placeholder="请选择礼品兑换状态">
          <el-option
            v-for="item in conversion"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单号" prop="orderCode">
        <el-input v-model="searchForm.orderCode" placeholder="订单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户id" prop="userId">
        <el-input v-model="searchForm.userId" placeholder="用户id" clearable></el-input>
      </el-form-item>
      <el-form-item label="时间段">
        <el-date-picker
          v-model="time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="onSearch">查询
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 过滤条件 end-->

    <!-- 表格 begin-->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="orderNumber" label="订单号" min-width="160"></el-table-column>

      <el-table-column prop="userId" label="用户id" min-width="80"></el-table-column>

      <el-table-column align="left" label="所属门店" min-width="170">
        <template slot-scope="props">
          {{props.row.shopId | shopName}}
        </template>
      </el-table-column>

      <el-table-column label="兑换用户" min-width="180">
        <template slot-scope="props">
          <div class="middle">
            <m-img :src="props.row.head" ratio="1" style="width: 50px"/>
            <span class="ml6" style="line-height: 50px;display: inline-block">{{props.row.nick}}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="payMoney" label="积分" min-width="90"></el-table-column>

      <el-table-column label="下单时间" min-width="160">
        <template slot-scope="props">{{props.row.payTime | dataFormat}}</template>
      </el-table-column>

      <el-table-column label="核销时间" min-width="160">
        <template slot-scope="props">{{props.row.exchangeDate | dataFormat}}</template>
      </el-table-column>

      <el-table-column label="状态" align="center" min-width="120">
        <template slot-scope="props">
          <el-tag type="danger" v-if="props.row.state == 2">待核销</el-tag>
          <el-tag type="success" v-else="props.row.state == 3">已核销</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="120">
        <template slot-scope="scope">
          <router-link :to="{name: 'giftCashDetail'}">
            <el-button size="mini">查看订单详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 end-->

    <!--分页 begin-->
    <div class="pagination-container mt20">
      <el-pagination background @current-change="onPageChange" :current-page="searchForm.page" :page-size="limit"
                     layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!--分页 begin-->

    <!--编辑 or 添加 弹窗 begin-->
    <el-dialog title="编辑" :visible.sync="dialogShow">
      <el-form ref="dataForm" :model="dataForm" label-position="left" label-width="70px"
               style='width: 400px; margin-left:50px;'>
        <el-form-item label="remark">
          <el-input placeholder="Please input" v-model="dataForm.input"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
    </el-dialog>
    <!--编辑 or 添加 弹窗 begin-->
  </page>
</template>

<script>
  import {elValidate} from '@/utils/widget'
  import {timeMap} from '@/utils/widget'
  import {status_prompt} from '@/utils/feedback'
  export default {
    name: 'giftCash',
    data() {
      return {
        conversion: [{
          label: '全部礼品',
          value: 0
        }, {
          label: '待核销礼品',
          value: 2
        }, {
          label: '已核销礼品',
          value: 3
        }],
        list: [],
        total: 0,
        limit: 0,
        listLoading: true,
        searchForm: {
          page: 1,
          state: 0,
          orderCode: null,
          date1: null,
          date2: null
        },
        dialogShow: false,
        dataForm: {}
      }
    },
    computed: {
      time: timeMap('searchForm.date1', 'searchForm.date2')
    },
    created() {
      this.getList()
    },
    methods: {
      // 增
      add() {

      },
      // 删
      del() {

      },

      /*
      * WTF
      * 由于后台不能一个接口完成条件查询...😔，自己慢慢看吧
      * */
      async getListStupidBackEnd () {
        let url
        if (this.searchForm.state == 0) { // 查全部礼品
          url = 'admin/order/getOrderByCondition'
        } else { // 查已核销礼品 or 待核销礼品
          url = 'admin/order/getOrderByConditionState'
        }
        return this.$get_list(url, this.searchForm)
      },
      // 获取列表
      async getList() {
        //this.listLoading = true
        let {total, list, limit} = await this.getListStupidBackEnd()
        Object.assign(this, {total, list, limit})
        document.documentElement.scrollTop = 0
      },
      // 更新数据
      update() {

      },
      // 搜索过滤
      onSearch() {
        this.searchForm.page = 1
        this.getList()
      },

      // 分页
      onPageChange(val) {
        this.searchForm.page = val
        this.getList()
      },

      onAdd() {
      },
      onDel() {
      },
      onUpdate() {
      },
      onDownload () {

      },
      async onSubmit() {
        await elValidate(this, 'dataForm')

        this.dialogShow = false
        await this.$nextTick()
        this.$refs.dataForm.resetFields()
      }
    }
  }
</script>
